import React, { useState, useEffect, useImperativeHandle } from 'react';
import TableEditor from 'src/components/TableEditor';
import PopValue from 'src/components/PopTab/PopValue';
import Operator from 'src/components/Conditions/Operator';
import { compare } from 'src/utils/compare';
import { cloneDeep } from 'lodash';
import { OPERATOR } from 'src/utils/constant';

export default function Conditions(props) {
  const [value, setValue] = useState([]);
  useEffect(() => {
    props.value && props.value.length > 0 && setValue(props.value);
  }, [props.value]);
  console.log(props);
  useImperativeHandle(props.createRef, () => ({
    // 暴露方法给父组件,收集验证值
    getValue: () => {
      return value;
    },
  }));

  // 根据operator获取operator对象
  const getOperatorObj = (operator) => props.operatorOptions.find((item) => item.operator === operator) || {};

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 60,
      render: (text, record, index) => {
        return <>{index + 1}</>;
      },
    },
    {
      title: '左变量',
      dataIndex: 'left_var_code',
      key: 'left_var_code',
      render: (text, record, index) => {
        // return 'a';
        return (
          <PopValue
            {...props}
            value={{
              var_code: record.left_var_code,
              var_name: record.left_var_name,
              var_type: record.left_var_type,
            }}
            type={record.left_var_type === 'dataSourceData' ? record.left_var_code.split('.')[0] : record.left_var_type}
            event_id={record.left_event_id}
            placeholder={props.isCompare ? '' : '左变量'}
            variable={props.variable}
            using_variables={props.using_variables}
            onChange={(val) => changeLeftValue(val, record)}
            disabled={props.disabled}
            except={['literal']}
            // style={{ ...compare(props, 'condition', 'left_var_code'), with: '95%' }}
            dataType={record.operator !== 'risk_level_eq' ? getOperatorObj(record.operator).dataTypeLimit : undefined}
            strategyId={props.strategyId}
            isLeft={true}
          />
        );
      },
    },
    {
      title: '操作符',
      dataIndex: 'operator',
      key: 'operator',
      render: (text, record, index) => {
        // return 'b';
        return (
          <Operator
            value={record.operator}
            placeholder={props.isCompare ? '' : '请选择'}
            onChange={(val) => changeOperator(val, record)}
            operatorOptions={props.operatorOptions}
            disabled={props.disabled}
            // style={compare(props, 'condition', 'operator', 'symbol')}
          />
        );
      },
    },
    {
      title: '右变量',
      dataIndex: 'right_var_code',
      key: 'right_var_code',
      render: (text, record, index) => {
        // return 'c';
        return (
          <>
            {/* {((record.operator && record.operator.type === OPERATOR._NO_RIGHT) ||
              (record.operator && record.operator.type === OPERATOR._HAS_RIGHT) ||
              !record.operator) && ( */}
            <PopValue
              {...props}
              value={{
                var_code: record.right_var_code,
                var_name: record.right_var_name,
                var_type: record.right_var_type,
              }}
              type={record.right_var_type || 'literal'}
              event_id={record.right_event_id}
              placeholder={props.isCompare ? '' : '右变量'}
              variable={props.variable}
              using_variables={props.using_variables}
              limitType={record.operator ? getOperatorObj(record.operator).varTypeLimit : []}
              onChange={(val) => changeRightValue(val, record)}
              disabled={
                props.disabled || (record.operator && getOperatorObj(record.operator).type === OPERATOR._NO_RIGHT)
              }
              // style={compare(props, 'condition', 'right_var_code')}
              strategyId={props.strategyId}
              leftVar={
                record.left_var_code && {
                  code: record.left_var_code,
                  type: record.left_var_type,
                }
              }
            />
            {/* )} */}
          </>
        );
      },
    },
  ];
  function handelChange(value) {
    setValue(value);
    props.onChange && props.onChange(value);
  }
  // 修改左值
  function changeLeftValue(val, record) {
    record.left_var_code = val.var_code;
    record.left_var_name = val.var_name;
    record.left_var_type = val.var_type;
    record.right_var_code = '';
    record.right_var_name = '';
    record.right_var_type = '';
    if (val.event_id) {
      record.left_event_id = val.event_id;
    }
    record.junction_type = 'none';
    setValue(cloneDeep(value));
    props.onChange && props.onChange(value);
  }

  // 修改右值
  function changeRightValue(val, record) {
    record.right_var_code = val.var_code;
    record.right_var_name = val.var_name;
    record.right_var_type = val.var_type;
    if (val.event_id) {
      record.right_event_id = val.event_id;
    }
    record.junction_type = 'none';
    setValue(cloneDeep(value));
    props.onChange && props.onChange(value);
  }

  // 修改操作符
  function changeOperator(val, record) {
    console.log(record, val);
    record.operator = val;
    record.right_var_code = '';
    record.right_var_name = '';
    record.right_var_type = '';
    // record.junction_type = 'none';
    setValue(cloneDeep(value));
    props.onChange && props.onChange(value);
  }
  return (
    <div style={{ paddingTop: '20px' }}>
      <TableEditor
        {...props}
        columns={columns}
        initItem={{}}
        dataSource={value}
        onChange={handelChange}
        // isInitOne={true}
        getButtonGroup={({ moveUpButton, moveDownButton, removeButton }) => {
          return [moveUpButton, moveDownButton, removeButton];
        }}
      />
    </div>
  );
}
